<template>
<div class="record_item">
    <div class="main">
        <div class="close_btn">
            <van-icon class="close_btn" name="clear" size="24" @click="close" />
        </div>
        <div class="res_show">
            <img src="../assets/img/food.png" alt="">
            <div class="des">
                <div>{{ item.itemName }}</div>
                <div>{{item.itemCal}}千卡 / {{item.itemUnit}}{{ item.unitText }}</div>
            </div>
            <div class="result"><span style="font-size: 1rem;font-weight: bold;color: #666;">{{ calorieRes }}</span>千卡</div>
        </div>
        <!-- 时长或克数 -->
        <div class="inputText">
            <span style="color: #e88e61;font-size: 1.75rem;font-weight: bold;border-bottom:0.125rem solid #e88e61;">{{ parseInt(inputVal)}}</span>
            {{ item.unitText }}
        </div>
        <!-- 键盘 -->
        <van-number-keyboard :show="true" theme="custom" close-button-text="确认" @input="onInput" @delete="onDelete" @close="addItemToList" />
    </div>
</div>
</template>

<script>
import {
    apiRequest
} from '../assets/js/axios_api'
export default {
    props: ['item'],
    data() {
        return {
            calorieRes: 0,
            inputVal: '0',
            userInfo: {}
        }
    },
    mounted() {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.calorieRes = 0
        this.inputVal = '0'
    },
    methods: {
        // 点击计算器确定按钮，提交
        addItemToList() {
            if (parseInt(this.inputVal) > 0) {
                let param = {}
                if (this.item.type == 'sport') {
                    param = {
                        cusId: this.userInfo.cusId,
                    }
                    param = {
                        cusId: this.userInfo.cusId,
                        sports: [{
                            id: this.item.id,
                            sportName: this.item.itemName,
                            sportTrophy: this.calorieRes, //消耗热量
                            duration: parseInt(this.inputVal), //运动时长
                            sportIconUrl: this.item.imgUrl,
                        }]
                    }
                    apiRequest(this, 'hmsportrecord', param, resData => {
                        // 返回成功要做的事
                        this.$router.push('/sportrecoreded')
                    }, 'post')
                } else {
                    let timeStr = this.item.type.split('_')[1]
                    param = {
                        cusId: this.userInfo.cusId,
                        foods: [{
                            id: this.item.id,
                            foodName: this.item.itemName,
                            foodTrophy: this.calorieRes, //热量
                            weight: parseInt(this.inputVal), //克重
                            foodIconUrl: this.item.imgUrl,
                            fat: Math.round(this.inputVal * (this.item.fat / this.item.itemUnit) * 100) / 100, //蛋白质
                            protein: Math.round(this.inputVal * (this.item.protein / this.item.itemUnit) * 100) / 100, //脂肪
                            carbohydrates: Math.round(this.inputVal * (this.item.carbohydrates / this.item.itemUnit) * 100) / 100, //碳水化合物
                        }],
                        "planDayTime": timeStr == 'bf' ? '1' : timeStr == 'lu' ? '2' : '3',
                    }
                    apiRequest(this, 'hmfoodrecord', param, resData => {
                        // 返回成功要做的事
                        this.$router.push('/foodrecoreded')
                    }, 'post')
                }
            }
        },
        // 输入
        onInput(val) {
            if (this.inputVal.length < 4) {
                this.inputVal += val;
                this.calorieRes = Math.round(this.inputVal * (this.item.itemCal / this.item.itemUnit) * 100) / 100
            }
        },
        onDelete() {
            this.inputVal = this.inputVal.slice(0, -1)
            if (!this.inputVal) {
                this.inputVal = '0'
            }
            this.calorieRes = Math.round(this.inputVal * (this.item.itemCal / this.item.itemUnit) * 100) / 100
        },
        close() {
            this.$emit('changeShow', false);
        },
    }
}
</script>

<style lang="less">
@import "../assets/css/common.less";

.record_item {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;

    .main {
        background-color: #fff;
        position: absolute;
        bottom: 13.75rem;
        left: 0;
        right: 0;
        height: 15rem;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;

        .close_btn {
            text-align: right;
            padding-top: 0.375rem;
            padding-right: 0.625rem;
        }

        .choose_time {
            padding-top: 1rem;
        }
    }

    .res_show {
        background-color: @recBg-color;
        padding: 0.625rem;
        margin: 1rem;
        border-radius: 0.5rem;
        position: relative;

        img {
            width: 2.5rem;
            height: 2.5rem;
        }

        .des {
            display: inline-block;
            vertical-align: bottom;

            div {
                padding: 0.1875rem 1.875rem;
                font-size: 0.625rem;
            }
        }

        .result {
            position: absolute;
            right: 1.25rem;
            top: 1.375rem;
        }

    }

    .inputText {
        font-size: 0.9375rem;
        color: #888;
        text-align: center;
        padding-top: 1.25rem;
    }

    .van-key--blue {
        background-color: @mdOrange-color  !important;
    }
}
</style>
